<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>师生风光</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" /><!--CSS RESET-->
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"><!--演示页面样式，使用时可以不引用-->
	<link rel="stylesheet" href="css/style.css">
	<style>
		a{
			text-decoration: none;
		}
		body{
			background: url(../../../images/bg1.jpg) no-repeat;
			background-size: 1700px ;

		}
	</style>
</head>
<body>
<div class="htmleaf-container">
	<h1 style="color: pink">师生墙</h1>
	<div class="cube-container">

		<div class="cube initial-position">

			<img class="cube-face-image image-1" src="img/7.png">

			<img class="cube-face-image image-2" src="img/8.png">

			<img class="cube-face-image image-3" src="img/9.png">

			<img class="cube-face-image image-4" src="img/10.png">

			<img class="cube-face-image image-5" src="img/11.png">

			<img class="cube-face-image image-6" src="img/12.png">

		</div>

	</div>
	<h2>	<h2> <a href="child1.html">班级墙</a></h2></h2>
	<div class="image-buttons">

		<input type="image" class="show-image-1" src="img/7.png"></input>

		<input type="image" class="show-image-2" src="img/8.png"></input>

		<input type="image" class="show-image-3" src="img/9.png"></input>

		<input type="image" class="show-image-4" src="img/10.png"></input>

		<input type="image" class="show-image-5" src="img/11.png"></input>

		<input type="image" class="show-image-6" src="img/12.png"></input>

	</div>
</div>

<script type="text/javascript">
	//DOM load event
	window.addEventListener("DOMContentLoaded", function () {

		var cube = document.querySelector(".cube"),
				imageButtons = document.querySelector(".image-buttons");
		var cubeImageClass = cube.classList[1];

		//Add click event listener to image buttons container
		imageButtons.addEventListener("click", function (e) {

			//Get node type and class value of clicked element
			var targetNode = e.target.nodeName,
					targetClass = e.target.className;

			//Check if image input has been clicked and isn't the currently shown image
			if (targetNode === "INPUT" && targetClass !== cubeImageClass) {

				console.log("Show Image: " + targetClass.charAt(11));

				//Replace previous cube image class with new class
				//cube.classList.replace(cubeImageClass, targetClass);
				cube.classList.remove(cubeImageClass);
				cube.classList.add(targetClass);

				//Update cube image class variable with new class
				cubeImageClass = targetClass;
			}
		});
	});
</script>
</body>
</html>